<template>
  <div class="home">
    <h4>{{ $t('grobal.title')}}</h4>

    <div>
      <van-button type="primary" @click="changeLang(LangEnum.ZH)">中文</van-button>
      <van-button type="primary" @click="changeLang(LangEnum.EN)">English</van-button>
    </div>

    <div>
      <van-button type="primary" @click="changeTheme(ThemeEnum.LIGHT)">Light</van-button>
      <van-button type="primary" @click="changeTheme(ThemeEnum.DARK)">Dark</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLangStore } from '@/store/modules/langStore/langStore';
import { useThemeStore } from "@/store/modules/designStore/designStore"
import { LangEnum, ThemeEnum } from '@/enums/styleEnum';
import { setHtmlTheme } from '@/utils';
const changeLang = (lang: LangEnum): void => {
  const langStore = useLangStore();
  langStore.setLang(lang);
}

const changeTheme = (theme: ThemeEnum): void => {
  const designStore = useThemeStore()
  designStore.setTheme(theme);
  setHtmlTheme(theme);
}

</script>

<style scoped lang="scss">

.home {
  
  .van-button {
    min-width: 100px;
    margin: 0 10px;
  }
}
</style>
